<template>
  <div class="content">
      <div class="header">
        <h3 class="title">用户列表</h3>
        <el-button type="primary" size="small" @click="handleNewUserClick">新建用户</el-button>
      </div>
      <div class="table">
        <el-table :data="usersList" border style="width: 100%" size="small">
          <el-table-column align="center" type="selection" />
          <el-table-column align="center" type="index" label="序号" />
          <el-table-column align="center" prop="name" label="Name" width="120" />
          <el-table-column align="center" prop="realname" label="真实姓名" width="150" />
          <el-table-column align="center" prop="cellphone" label="手机号" width="150" />
          <el-table-column align="center" prop="enable" label="状态" width="80" >
            <template #default="scope">
              <el-button size="small" :type="scope.row.enable? 'primary' : 'danger'" plain>
                {{scope.row.enable ? '启用': '禁用'}}
              </el-button> 
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createAt" label="创建时间">
            <template #default="scope">
                {{formatUTC(scope.row.createAt)}} 
            </template>
          </el-table-column>
          <el-table-column align="center" prop="updateAt" label="更新时间">
            <template #default="scope">
                {{formatUTC(scope.row.updateAt)}} 
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="190">
            <template #default="scope">
              <el-button icon="Edit" type="primary" text @click="handleEditBtnClick(scope.row)">编辑</el-button>
              <el-button icon="delete" type="danger" text @click="handleDeleteBtnClick(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="usersTotalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
  </div>
</template>

<script setup lang="ts">
import useSystemStore from '@/store/main/system/system'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { formatUTC } from '@/utils/format'

//定义事件
const emit = defineEmits(['newClick', 'editClick'])

const pageSize = ref(10)
const currentPage = ref(1)
const systemStore = useSystemStore()
fetchUserListData()


const { usersList, usersTotalCount } = storeToRefs(systemStore)

//页码相关逻辑
const handleSizeChange = () => {
  fetchUserListData()
}

const handleCurrentChange = () => {
  fetchUserListData()
}

//定义函数
function fetchUserListData(fromData: any = {}) {
  const size = pageSize.value
  const offset = (currentPage.value - 1) * size
  const pageInfo = {size, offset}

  const queryInfo = { ...pageInfo, ...fromData }
  //发起网络请求
  systemStore.postUserListAction(queryInfo)
}

//编辑
const handleEditBtnClick = (itemData: any) => {
  // console.log(itemData)
  emit('editClick', itemData)
}

//删除
const handleDeleteBtnClick = (id: number) => {
  // console.log(id)
  systemStore.deleteUserByIdAction(id)
}


//新建用户
const handleNewUserClick = () => {
  emit('newClick')
}

defineExpose({
  fetchUserListData
})
</script>

<style lang="less" scoped>
.content {
  margin-top: 20px;
  background-color: #fff;
  .header {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    align-items: flex-end;
  }
  .table {
    padding: 10px;
  }
  .pagination {
    display: flex;
    justify-content: end;
    padding-bottom: 20px;
  }
}
</style>